<template>
  <div class="main-wrapper">
    <div class="filter-container">
      <el-input v-model="listQuery.name" placeholder="项目名称" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.owner" placeholder="业主单位" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.branchId" placeholder="合同签署公司" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.contractNo" placeholder="合同编号" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.busiId" class="filter-item" placeholder="请选择类型">
        <el-option v-for="item in busiConfigs" :key="item.id" :label="item.value" :value="item.id" />
      </el-select>
      <el-cascader
        v-model="profession"
        class="filter-item"
        :show-all-levels="false"
        :options="profConfigs"
        :props="{ expandTrigger: 'hover', label: 'value', value: 'id' }"
        placeholder="请选择专业"
      />
      <el-button type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
      <el-button icon="el-icon-refresh-left" @click="resetQuery">重置</el-button>
      <router-link to="/achievement/create">
        <el-button type="primary" icon="el-icon-edit">添加</el-button>
      </router-link>
    </div>

    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row>
      <el-table-column label="项目名称" align="center">
        <template slot-scope="{row}">
          {{ row.name }}
        </template>
      </el-table-column>
      <el-table-column label="业主单位" align="center">
        <template slot-scope="{row}">
          {{ row.owner }}
        </template>
      </el-table-column>
      <el-table-column label="合同签订时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.contractTime | timeFilter('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="投资额" align="center">
        <template slot-scope="{row}">
          {{ row.investMoney | priceFilter }}
        </template>
      </el-table-column>
      <el-table-column label="合同金额" align="center">
        <template slot-scope="{row}">
          {{ row.contractMoney | priceFilter }}
        </template>
      </el-table-column>
      <el-table-column label="合同签署公司" align="center">
        <template slot-scope="{row}">
          {{ row.branchId }}
        </template>
      </el-table-column>
      <el-table-column label="项目类别" align="center">
        <template slot-scope="{row}">
          {{ row.busiName }}
        </template>
      </el-table-column>
      <el-table-column label="专业" align="center">
        <template slot-scope="{row}">
          {{ row.profName }}
        </template>
      </el-table-column>
      <el-table-column label="合同编号" align="center">
        <template slot-scope="{row}">
          {{ row.contractNo }}
        </template>
      </el-table-column>
      <el-table-column label="业务人员" align="center">
        <template slot-scope="{row}">
          {{ row.busiPerson }}
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center">
        <template slot-scope="{row}">
          {{ row.type }}
        </template>
      </el-table-column>
      <el-table-column label="收到日期" align="center">
        <template slot-scope="{row}">
          <span>{{ row.receiveDate | timeFilter('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="来源" align="center">
        <template slot-scope="{row}">
          {{ row.fromType }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="归档" align="center">
        <template slot-scope="{row}">
          {{ row.archive }}
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center">
        <template slot-scope="{row}">
          {{ row.remark }}
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button size="mini" type="success" @click="handleDetail(row)">详情</el-button>
          <router-link :to="'/achievement/edit/'+row.id"><el-button type="primary" size="mini">修改</el-button></router-link>
          <!-- <el-button v-if="row.status!=0" size="mini" type="danger" @click="delAchievement(row)">删除</el-button>
          <el-button v-if="row.status!=1" size="mini" type="success" @click="reuseAchievement(row)">恢复</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="fetchAchievementList" />

    <el-dialog title="详情" top="1vh" :visible.sync="dialogDetailVisible">
      <el-form ref="dataForm" :model="achievementData" label-position="left" label-width="110px">
        <el-form-item label="项目名称">
          <span>{{ achievementData.name }}</span>
        </el-form-item>
        <el-form-item label="业主单位">
          <span>{{ achievementData.owner }}</span>
        </el-form-item>
        <el-form-item label="合同签订时间">
          <span>{{ achievementData.contractTime | timeFilter('{y}-{m}-{d}') }}</span>
        </el-form-item>
        <el-form-item label="投资额">
          <span>{{ achievementData.investMoney | priceFilter }}</span>
        </el-form-item>
        <el-form-item label="合同金额">
          <span>{{ achievementData.contractMoney | priceFilter }}</span>
        </el-form-item>
        <el-form-item label="合同签署公司">
          <span>{{ achievementData.branchId }}</span>
        </el-form-item>
        <el-form-item label="项目类别">
          <span>{{ achievementData.busiName }}</span>
        </el-form-item>
        <el-form-item label="专业">
          <span>{{ achievementData.profName }}</span>
        </el-form-item>
        <el-form-item label="合同编号">
          <span>{{ achievementData.contractNo }}</span>
        </el-form-item>
        <el-form-item label="业务人员">
          <span>{{ achievementData.busiPerson }}</span>
        </el-form-item>
        <el-form-item label="类型">
          <span>{{ achievementData.type }}</span>
        </el-form-item>
        <el-form-item label="收到日期">
          <span>{{ achievementData.receiveDate | timeFilter('{y}-{m}-{d}') }}</span>
        </el-form-item>
        <el-form-item label="来源">
          <span>{{ achievementData.fromType }}</span>
        </el-form-item>
        <el-form-item label="报告">
          <a v-for="item in achievementData.reportFiles" :key="item.id" :href="getFullFileUrl(item.fileUrl)"><span>{{ item.name }}</span></a>
        </el-form-item>
        <el-form-item label="合同">
          <a v-for="item in achievementData.contractFiles" :key="item.id" :href="getFullFileUrl(item.fileUrl)"><span>{{ item.name }}</span></a>
        </el-form-item>
        <el-form-item label="批复">
          <a v-for="item in achievementData.replyFiles" :key="item.id" :href="getFullFileUrl(item.fileUrl)"><span>{{ item.name }}</span></a>
        </el-form-item>
        <el-form-item label="成果确认单">
          <a v-for="item in achievementData.confirmFiles" :key="item.id" :href="getFullFileUrl(item.fileUrl)"><span>{{ item.name }}</span></a>
        </el-form-item>
        <el-form-item label="归档">
          <span>{{ achievementData.archive }}</span>
        </el-form-item>
        <el-form-item label="备注">
          <span>{{ achievementData.remark }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAchievementList, addAchievement, editAchievement, editAchievementStatus, getAchievement } from '@/api/achievement'
import Pagination from '@/components/Pagination'
import { getBusiConfigList, getProfConfigTree } from '@/api/config'
import { getByXml, getImageUrl, parseTime } from '@/utils'
import { uploadFileData } from '@/api/upload'

export default {
  name: 'Achievement',
  components: {
    Pagination
  },
  filters: {
    styleFilter(style) {
      const styleMap = { 1: 'success', 0: 'danger' }
      return styleMap[style]
    },
    timeFilter(time, format) {
      return parseTime(time, format)
    },
    priceFilter(price) {
      return (price / 10000) + '万元'
    },
    statusFilter(value) {
      const statusMap = { 0: '无效', 1: '有效' }
      return statusMap[value]
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 20
      },
      statusOptions: [
        { key: 0, statusName: '无效' },
        { key: 1, statusName: '有效' }
      ],
      busiConfigs: [],
      profConfigs: [],
      profession: 0,
      achievementData: {},
      dialogFormVisible: false,
      dialogDetailVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '添加'
      },
      rules: {},
      // fileList: []
      fileList: [{ id: 1, name: 'food.jpeg', imgUrl: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }]
    }
  },
  created() {
    getBusiConfigList().then(res => {
      this.busiConfigs = res.data
    })
    getProfConfigTree().then(res => {
      this.profConfigs = res.data
    })
    this.fetchAchievementList()
  },
  methods: {
    fetchAchievementList() {
      this.listLoading = true
      console.log(this.listQuery)
      getAchievementList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        console.log(this.list)
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    handleFilter() {
      if (this.profession) {
        this.listQuery.profId = this.profession[1] || this.profession[0]
      }
      this.fetchAchievementList()
    },
    resetQuery() {
      this.listQuery = {
        pageNo: 1,
        pageSize: 20
      }
    },
    resetAchievementData() {
      this.achievementData = {}
    },
    handleDetail(row) {
      this.achievementData = Object.assign({}, row)
      getAchievement(row.id).then(res => {
        this.achievementData = res.data
      })
      this.dialogDetailVisible = true
    },
    handleCreate() {
      this.resetAchievementData()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createAchievement() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.achievementData.profId = this.profession[1] || this.profession[0]
          addAchievement(this.achievementData).then((response) => {
            this.fetchAchievementList()
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    handleUpdate(row) {
      this.achievementData = Object.assign({}, row)
      this.dialogStatus = 'update'
      this.profession = this.achievementData.profId
      if (this.achievementData.profId && this.achievementData.profId % 10) {
        this.profession = [Math.floor(this.achievementData.profId / 10) * 10, this.achievementData.profId]
      } else {
        this.profession = [this.achievementData.profId]
      }
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateAchievement() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.achievementData)
          editAchievement(tempData).then(() => {
            for (const v of this.list) {
              if (v.id === this.achievementData.id) {
                const index = this.list.indexOf(v)
                this.list.splice(index, 1, this.achievementData)
                break
              }
            }
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    updateAchievementStatus(row, status) {
      row.status = status
      editAchievementStatus(row.lid, status).then(() => {
        this.achievementData = Object.assign({}, row)
        this.achievementData.status = status
        for (const v of this.list) {
          if (v.id === this.achievementData.id) {
            const index = this.list.indexOf(v)
            this.list.splice(index, 1, this.achievementData)
            break
          }
        }
      })
      this.$message({
        message: '操作成功',
        type: 'success'
      })
    },
    // 以下是文档上传的方法
    uploadFiles(e) {
      uploadFileData(e.file).then(res => {
        console.log(getByXml(res, 'Key'))
        console.log(this.fileList)
      })
    },
    getFullFileUrl(file) {
      return getImageUrl(file)
    }
  }
}
</script>
<style lang="scss" scoped>
.main-wrapper {
  margin: 8px;
  .filter-container {
    padding: 10px 0;
    line-height: 52px;
    .filter-item {
      width: 200px;
      margin-right: 10px;
    }
  }
  .price-input {
    width: 300px;
  }
}
</style>
